<template>
	<van-cell-group>
		<van-field center :label="label" :title-width="titleWidth" clickable placeholder="请选择" readonly required @click-input="this.show = true"
			v-model="result"
			readonly
			use-button-slot>
			<text slot="button" size="small" type="primary">
				>
			</text>
		</van-field>

		<van-popup :show="show" round position="bottom" @click-overlay="closePop" :close="onClose" >
			<van-datetime-picker class="picker" :type="dateType" :value="showData||columns" @cancel="closePop" @confirm="confirmOk"></van-datetime-picker>
		</van-popup>
	</van-cell-group>

</template>

<script>
	import {formatTime} from '@/util/index.js'
	
	export default {
		name: "selectPop",
		props: {
			columns: {
				type: String,
				default: String(new Date().getTime())
			},
			label:{
				type: String,
				default:''
			},
			dateType:{
				type: String,
				default:'dateTime'
			},
			value:{
				type:String,
				default:''
			},
			format:{
				type:String,
				default:null
			},
			titleWidth:{
				type:String,
				default:'7em'
			}
		},
		mounted() {
			if(this.value){
				this.showData = String(new Date(this.value).getTime())
				this.result = this.value
			}
		},
		data() {
			return {
				show: false,
				result:undefined,
				showData:''
			};
		},
		methods: {
			
			onClose() {
				this.show = false
			},
			
			closePop() {
				this.show = false
			},
			confirmOk(value){
				this.result = formatTime(value.detail,this.format||'yyyy-MM-dd')
				this.show = false
				this.$emit('change',this.result)
			}
		}
	}
</script>

<style>

</style>